<template>
	<view class="nav_bar">
		<view class="li" v-for="(item,index) in cateList" :key="index" :class="curTab==index?'active':null"
			@click.stop="tabIndex(index)">
			{{item.name}}
		</view>

	</view>
</template>

<script>
	export default {

		props: {
			cateList: {
				type: Array,
				defalut: () => {
					return []
				}
			},
			curTab: {
				type: Number,
				defalut: 0
			}
		},
		methods: {
			tabIndex(index) {
				this.$emit('tabIndex', index)

			}
		}
		// data() {
		// 	return {
		// 		curTab: 0
		// 	}
		// }
	}
</script>

<style lang="scss">
	.nav_bar {
		width: 100%;
		height: 80px;
		padding: 0 24px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;

		.li {
			height: 80px;
			line-height: 80px;
			// padding-bottom: 16px;
			font-size: 28px;
			font-family: PingFang SC-中粗体, PingFang SC;
			font-weight: normal;
			color: #595959;
			border-bottom: 4px solid #FFFFFF;


			&.active {
				color: #000000;
				border-color: #177FFF;
			}
		}
	}
</style>
